<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-07-20 17:35:50
 * @LastEditTime: 2022-07-21 00:46:14
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\views\SysManage\Role\components\Drawer\auth.vue
 * Copyright 版权声明
-->
<template>
  <div class="">
    <h4 style="margin-top: 0;">
      角色名称：{{temp.roleName}}
    </h4>
    <el-tree
      ref="treeMenuList"
      :data="menuList"
      :props="treeDefaultProps"
      show-checkbox
      node-key="id"
      :default-expand-all="true"
      :default-checked-keys="menuListChcekedArr"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getRoleMenuList } from '@/api/SysManage/role'
// import { getLastRoleResourceInfo } from '@/api/BASE_MODULE/role'

export default {
  name: 'Detail',
  computed: {
    ...mapGetters([
      'drawerCurrent'
    ]),
    drawerType: function() {
      return this.drawerCurrent.drawerType
    }
  },
  components: {
  },
  data() {
    return {
      temp: {},
      menuListChcekedArr: [],
      menuList: [],
      treeDefaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
  },
  async created() {
    // 列表传过来的数据
    const temp = this.drawerCurrent.params
    this.temp = Object.assign({}, this.temp, temp)
    await this.getRoleMenuList()
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
    async getRoleMenuList() {
      // 递归处理数据
      const loopMenuList = (dataArr, returnArr = [], parentNode = {}, level = 1, spl = '') => {
        spl += '---   '
        for (const i in dataArr) {
          console.log(spl + 'level-', level, '--parentNode:', parentNode)
          // console.log(dataArr[i].name, dataArr[i])
          let currentId = dataArr[i].id
          // 如果是增删改查按钮
          if (dataArr[i].category === 3) {
            currentId = `${parentNode.id}separator${dataArr[i].id}`
          }
          const item = {
            id: currentId,
            name: dataArr[i].name,
            children: []
          }
          // menuList.push(item)
          returnArr.push(item)
          // 如果是按钮资源已被选中
          if (dataArr[i].category !== 1 && dataArr[i].check === true) {
            // 如果是增删改查按钮
            // if (dataArr[i].category === 3) {
            //   currentId = `${parentNode.id}separator${dataArr[i].id}`
            // } else {
            this.menuListChcekedArr.push(currentId)
            // }
          }
          // console.log(spl + 'returnArr-', returnArr)

          if (dataArr[i].children) {
            // console.log('---', i)
            loopMenuList(dataArr[i].children, item.children, dataArr[i], level + 1, spl)
          }
        }
        return returnArr
      }

      // drawer loadding 状态 打开
      this.$store.dispatch('SetDrawerloading', true)

      this.menuList = []
      this.menuListChcekedArr = []

      const res = await getRoleMenuList({
        roleId: this.temp.id
      })
      const resData = res.data
      const resMenuList = resData
      console.log('resMenuList--:', resMenuList)

      // 递归处理数据
      this.menuList = loopMenuList(resMenuList)

      console.log('--this.menuList', this.menuList)

      console.log('--this.menuListChcekedArr', this.menuListChcekedArr)

      // drawer loadding 状态 关闭
      this.$store.dispatch('SetDrawerloading', false)

      // const resRole = await getLastRoleResourceInfo({
      //   roleID: this.temp.roleID
      // })
      // const resRoleData = resRole.data

      // const menuListChcekedArr = []
      // for (const item of resRoleData) {
      //   menuListChcekedArr.push(item.resourceID)
      // }
      // // this.menuListChcekedArr = [3, 4, 7, 6]
      // this.menuListChcekedArr = menuListChcekedArr
    },
    // 获取表单数据
    getFormData() {
      const arr1 = this.$refs.treeMenuList.getCheckedKeys()
      const arr2 = this.$refs.treeMenuList.getHalfCheckedKeys()
      const menuListChcekedArr = arr1.concat(arr2)
      const res = {
        // 角色id
        id: this.temp.id
        // resourceIDList: menuListChcekedArr
      }
      for (const item of menuListChcekedArr) {
        const hasSeparator = item.indexOf('separator')
        // 如果不是增删改查按钮
        if (hasSeparator === -1) {
          if (!res[item]) {
            res[item] = 0
          }
        } else { // 如果是增删改查按钮
          const splitArr = item.split('separator')
          const menuId = splitArr[0]
          const btnNum = splitArr[1] * 1
          // console.log('-----menuId', menuId, '-----btnNum', btnNum)
          if (!res[menuId]) {
            res[menuId] = 0
            res[menuId] += btnNum
          } else {
            res[menuId] += btnNum
          }
        }
      }
      // console.log('--form data--:', res)
      return res
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
